@charset"utf-8";
@import 'normalize.scss';
@import 'base.scss';
html,
body {
    height: 100%;
}

// 计算尺寸函数
@function p2r($size) {
    @return ($size/32)*1rem;
}

// 设置图片居中
@mixin bgc($url, $width) {
    position: absolute;
    left: 50%;
    margin-left: p2r(-$width/2);
    background: url($url) no-repeat center / 100% 100%;
}

// 直接设置背景图 不考虑居中
@mixin bg($url) {
    background: url($url) no-repeat center / 100% 100%;
    position: absolute;
}

// 设置尺寸
@mixin size($width, $height) {
    width: p2r($width);
    height: p2r($height);
}

// title
.title {
    position: absolute;
    top: p2r(32);
    left: p2r(32);
    color: white;
    padding-left: p2r(20);
    h3 {
        font-size: p2r(64);
    }
    p {
        font-size: p2r(24);
        padding-top: p2r(12);
    }
    .line {
        height: 100%;
        background-color: white;
        width: p2r(5);
        position: absolute;
        left: 0;
        top: 0;
    }
}

.swiper-container {
    height: 100%;
    position: relative;
    .loading {
        position: absolute;
        z-index: 2;
        height: 100%;
        width: 100%;
        background-color: peachpuff;
        .rider {
            @include size(416, 121);
            position: absolute;
            top: p2r(233);
            left: 50%;
            transform: translateX(-50%);
            text-align: right;
            img {
                width: p2r(154);
                height: 100%;
            }
        }
        .progress {
            @include size(416, 20);
            background-color: #fc2e4d;
            border: 2px solid #373838;
            border-radius: p2r(10);
            position: absolute;
            top: p2r(356);
            left: 50%;
            transform: translateX(-50%);
        }
        .text {
            @include size(220, 28);
            @include bgc('../images/loading/loading-txt.png', 220);
            top: (396/32)*1rem;
        }
        .logo {
            @include size(162, 39);
            @include bgc('../images/loading/waimai-logo.png', 162);
            bottom: (140/32)*1rem;
        }
        .copyright {
            font-size: p2r(24);
            position: absolute;
            bottom: p2r(80);
            text-align: center;
            width: 100%;
            color: hotpink;
        }
    }
    .welcome {
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: deepskyblue;
        position: absolute;
        top: 0;
        left: 0;
        .beartitle {
            @include size(397, 224);
            @include bgc('../images/page1/theme-title.png', 397);
            top: p2r(42);
            .hello {
                @include size(70, 75);
                @include bg('../images/page1/hello.png');
                top: p2r(20);
                right: p2r(8);
            }
        }
        .bear-box {
            z-index: 1;
            position: absolute;
            @include size(167, 279);
            bottom: p2r(346);
            left: 50%;
            transform: translateX(-50%);
            .bear {
                width: 100%;
                height: 100%;
                background: url('../images/page1/rider2.png') no-repeat center / 100% 100%;
            }
            .smoke {
                @include size(167,
                32);
                @include bg('../images/page1/jet1.png');
            }
        }
        .cloud {
            @include size(640,
            673);
            bottom: 0;
            @include bg('../images/page1/clouds.png');
        }
        .grass {
            @include size(640,
            396);
            @include bg('../images/page1/grass1.png');
            bottom: 0;
        }
        .trees {
            @include size(599,
            71);
            @include bg('../images/page1/trees.png');
            bottom: (352/32)*1rem;
        }
        .grass2 {
            @include size(640,
            228);
            @include bg('../images/page1/grass2.png');
            bottom: 0;
        }
        .rotate-btn {
            @include size(208,
            206);
            position: absolute;
            bottom: p2r(86);
            left: 50%;
            transform: translateX(-50%);
            .circle1,
            .circle2 {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .circle1 {
                background: url(../images/page1/circle1.png)no-repeat center / 100% 100%;
            }
            .circle2 {
                background: url(../images/page1/circle2.png)no-repeat center / 100% 100%;
            }
            .btn {
                @include size(124,
                113);
                background: url(../images/page1/bear-btn-aft.png)no-repeat center / 100% 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .text {
            font-size: p2r(32);
            color: green;
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: p2r(38);
        }
    }
    .waimai-container {
        width: 100%;
        height: 100%;
        background: gray;
        position: absolute;
        top: 0;
        left: 0;
    }
    // 轮播的页面
    .page1 {
        position: relative;
        background-color: #be8651;
        .title {
            position: absolute;
            top: p2r(32);
            left: p2r(32);
            color: white;
            padding-left: p2r(20);
            h3 {
                font-size: p2r(64);
            }
            p {
                font-size: p2r(24);
                padding-top: p2r(12);
            }
            .line {
                height: 100%;
                background-color: white;
                width: p2r(5);
                position: absolute;
                left: 0;
                top: 0;
            }
        }
        .scroll-paper1 {
            @include bgc('../images/page2/bg1.png',
            576);
            @include size(576,
            573);
            bottom: p2r(252);
            .person {
                @include bgc('../images/page2/front1.png',
                439);
                @include size(439,
                349);
                bottom: p2r(50);
                z-index: 1;
                .files {
                    background-image: url(../images/page2/papers.png);
                    background-repeat: no-repeat;
                    background-position: bottom right;
                    background-size: p2r(115) p2r(114);
                    @include size(85,
                    50); // 这个是设置背景图的大小
                    position: absolute;
                    bottom: p2r(104);
                    left: p2r(27);
                    border: 1px solid red;
                    .paper1 {
                        background-image: url(../images/page2/papers.png);
                        background-repeat: no-repeat;
                        background-size: p2r(115) p2r(114);
                        background-position: 0 p2r(-32);
                        @include size(86,
                        26);
                        position: absolute;
                        left: p2r(-70);
                        bottom: p2r(45);
                    }
                    .paper2 {
                        background-image: url(../images/page2/papers.png);
                        background-repeat: no-repeat;
                        background-position: p2r(-45) 0;
                        background-size: p2r(115) p2r(114);
                        @include size(64,
                        20);
                        position: absolute;
                        bottom: p2r(80);
                        right: 0;
                    }
                }
            }
            .message_box {
                @include bgc('../images/page2/txt-bubbl.png',
                363);
                @include size(363,
                119);
                bottom: p2r(-100);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
                .text {
                    @include bgc('../images/page2/txt-work.png',
                    220);
                    @include size(220,
                    30);
                }
            }
        }
        .scroll-paper2 {
            @include bgc('../images/page2/bg2.png',
            582);
            @include size(582,
            520);
            bottom: p2r(252);
            .person {
                @include bgc('../images/page2/relax.png',
                436);
                @include size(436,
                332);
                bottom: p2r(50);
                z-index: 1;
                .leg1 {
                    @include bg('../images/page2/leg1.png');
                    bottom: p2r(110);
                    left: p2r(195);
                    @include size(113,
                    24);
                }
                .leg2 {
                    @include bg('../images/page2/leg2.png');
                    bottom: p2r(120);
                    left: p2r(193);
                    @include size(85,
                    71);
                }
            }
            .message_box {
                @include bgc('../images/page2/txt-bubbl.png',
                363);
                @include size(363,
                119);
                bottom: p2r(-100);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
                .text {
                    @include bgc('../images/page2/txt-life.png',
                    220);
                    @include size(224,
                    31);
                }
            }
        }
        .scroll-paper3 {
            @include bgc('../images/page2/bg3.png',
            561);
            @include size(561,
            516);
            bottom: p2r(270);
            .person {
                @include bgc('../images/page2/person.png',
                503);
                @include size(503,
                229);
                bottom: p2r(50);
                z-index: 1;
                .word1 {
                    @include bg('../images/page2/word1.png');
                    bottom: p2r(194);
                    left: p2r(-7);
                    @include size(92,
                    83);
                }
                .word2 {
                    @include bg('../images/page2/word2.png');
                    bottom: p2r(245);
                    left: p2r(115);
                    @include size(77,
                    70);
                }
                .word3 {
                    @include bg('../images/page2/word3.png');
                    bottom: p2r(220);
                    right: p2r(130);
                    @include size(115,
                    104);
                }
                .word4 {
                    @include bg('../images/page2/word4.png');
                    bottom: p2r(230);
                    right: p2r(12);
                    @include size(79,
                    73);
                }
            }
            .message_box {
                @include bgc('../images/page2/txt-bubbl.png',
                363);
                @include size(363,
                119);
                bottom: p2r(-100);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
                .text {
                    @include bgc('../images/page2/txt-work.png',
                    220);
                    @include size(224,
                    31);
                }
            }
        }
        .sphere {
            @include bgc('../images/page2/sphere1.png',
            640);
            @include size(640,
            356);
            bottom: p2r(0);
        }
        .bear {
            @include bg('../images/page2/bear1.png');
            @include size(178,
            134);
            bottom: 0;
            right: p2r(38);
        }
    }
    .page2 {
        background-color: #ee4143;
        .bg {
            @include bgc('../images/page3/bg4_.png',
            592);
            @include size(592,
            490);
            bottom: p2r(330);
        }
        .bear {
            background-image: url('../images/page3/bear2.png');
            background-repeat: no-repeat;
            position: absolute;
            @include size(227,
            336);
            background-size: p2r(368) p2r(427);
            background-position: p2r(-103) p2r(-96);
            bottom: p2r(310);
            left: 50%;
            margin-left: p2r(-227/2);
            z-index: 1;
            .face1 {
                @include bg('../images/page3/face1.png');
                @include size(102,
                102);
                top: p2r(0);
                left: p2r(-102);
            }
            .face2 {
                @include bg('../images/page3/face2.png');
                @include size(101,
                102);
                top: p2r(-102);
                right: p2r(-101/2);
            }
            //              熊掌
            .hand-left {
                @include bg('../images/page3/hand-left_.png');
                @include size(74,
                77);
                top: p2r(180);
                left: p2r(30);
            }
            .hand-right {
                @include bg('../images/page3/hand-right.png');
                @include size(74,
                77);
                top: p2r(180);
                right: p2r(30);
            }
        }
        //         桌子
        .table {
            @include bgc('../images/page3/table.png',
            514);
            @include size(514,
            258);
            bottom: p2r(140);
            z-index: 1;
        }
        .food {
            @include bgc('../images/page3/foods.png',
            354);
            @include size(354,
            152);
            bottom: p2r(330);
            z-index: 1;
        }
        .sphere {
            @include bgc('../images/page3/sphere2.png',
            640);
            @include size(640,
            356);
            bottom: p2r(0);
        }
    }
    .page3 {
        background-color: #dd8a03;
        .bg {
            @include bgc('../images/page4/bg5.png',
            592);
            @include size(592,
            580);
            bottom: p2r(300);
        }
        .bear {
            @include bgc('../images/page4/bear3.png',
            206);
            @include size(206,
            301);
            bottom: p2r(195);
            z-index: 1;
        }
        .license {
            @include bg("../images/page4/license.png");
            @include size(197,
            140);
            bottom: p2r(500);
            left: p2r(40);
        }
        .oil {
            @include bgc("../images/page4/oil.png",
            205);
            @include size(205,
            107);
            bottom: p2r(660);
        }
        .evil2 {
            @include bg("../images/page4/evil2.png");
            @include size(198,
            163);
            bottom: p2r(480);
            right: p2r(30);
        }
        .sphere {
            @include bg('../images/page4/sphere3.png');
            @include size(640,
            356);
            bottom: p2r(0);
        }
    }
    .page4 {
        background-color: #3fa100;
        .bg {
            @include bgc('../images/page5/bg6.png',
            588);
            @include size(588,
            333);
            bottom: p2r(300);
        }
        .bear {
            @include bgc('../images/page5/bear4.png',
            309);
            @include size(309,
            325);
            bottom: p2r(170);
            z-index: 1;
        }
        .card1 {
            @include bg('../images/page5/card1.png');
            @include size(160,
            175);
            bottom: p2r(435);
            left: p2r(32);
        }
        .card2 {
            @include bgc('../images/page5/card2.png',
            161);
            @include size(161,
            209);
            bottom: p2r(530);
        }
        .card3 {
            @include bg('../images/page5/card3.png');
            @include size(167,
            184);
            bottom: p2r(420);
            right: p2r(45);
        }
        .sphere {
            @include bgc('../images/page5/sphere4.png',
            640);
            @include size(640,
            356);
            bottom: p2r(0);
        }
    }
    .page5 {
        background-color: #0098cf;
        .bg {
            @include bgc('../images/page6/bg7.png',
            594);
            @include size(594,
            493);
            bottom: p2r(300);
        }
        .bear-box {
            @include size(230,
            390);
            position: absolute;
            bottom: p2r(175);
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            .snow {
                @include bg('../images/page6/snow-piece.png');
                @include size(32,
                32);
                top: p2r(-32);
            }
            .bear {
                @include bg('../images/page6/rider2.png');
                @include size(230,
                390);
                bottom: p2r(0);
                .weather {
                    @include bg('../images/page6/weather-cloud.png');
                    @include size(432,160);
                    top: p2r(-240);
                    left:-50%;
                }
            }
            .shadow {
                @include bgc('../images/page6/shadow.png',
                114);
                @include size(114,
                26);
                bottom: p2r(0);
            }
        }
        .sphere {
            @include bgc('../images/page6/sphere5.png',
            640);
            @include size(640,
            356);
            bottom: p2r(0);
        }
    }
    .page6 {
        background-color: #b527a0;
        .bg{
            @include bgc('../images/page7/bg8.png',
            588);
            @include size(588,
            333);
            bottom: p2r(300);
        }
        .bear{
            @include bgc('../images/page7/bear5.png',
            285);
            @include size(285,
            328);
            bottom: p2r(200);
            z-index: 1;
            .gift-box{
              position: absolute;
              top: 0;
              left: 50%;
              border: 1px solid red;
              .gift1{
                  @include bgc('../images/page7/gift1.png',35);
                  @include size(35,29);
                  transform:rotateZ(28deg) translateY(p2r(240));
              }
              .gift2{
                  @include bgc('../images/page7/gift2.png',93);
                  @include size(93,79);
                  transform:rotateZ(28deg*2) translateY(p2r(240));
              }
              .gift3{
                  @include bgc('../images/page7/gift3.png',72);
                  @include size(72,64);
                    transform:rotateZ(28deg*3) translateY(p2r(240));
              }
              .gift4{
                  @include bgc('../images/page7/gift4.png',91);
                  @include size(91,73);
                    transform:rotateZ(28deg*4) translateY(p2r(240));
              }
              .gift5{
                  @include bgc('../images/page7/gift5.png',99);
                  @include size(99,62);
                    transform:rotateZ(28deg*5) translateY(p2r(240));
              }
              .gift6{
                  @include bgc('../images/page7/gift6.png',107);
                  @include size(107,80);
                    transform:rotateZ(28deg*6) translateY(p2r(240));
              }
              .gift7{
                  @include bgc('../images/page7/gift7.png',107);
                  @include size(107,80);
                    transform:rotateZ(28deg*7) translateY(p2r(240));                  
              }
              .gift8{
                  @include bgc('../images/page7/gift8.png',88);
                  @include size(88,64);
                    transform:rotateZ(28deg*8) translateY(p2r(240));
              }
              .gift9{
                  @include bgc('../images/page7/gift9.png',78);
                  @include size(78,50);
                    transform:rotateZ(28deg*9) translateY(p2r(240));
              }
              .gift10{
                  @include bgc('../images/page7/gift10.png',49);
                  @include size(49,37);
                    transform:rotateZ(28deg*10) translateY(p2r(240));
              }
              .gift11{
                  @include bgc('../images/page7/gift11.png',51);
                  @include size(51,31);
                    transform:rotateZ(28deg*11) translateY(p2r(240));
              }
              .gift12{
                  @include bgc('../images/page7/gift12.png',37);
                  @include size(37,23);
                    transform:rotateZ(28deg*12) translateY(p2r(240));
              }
            }
        }
        .sphere{
            @include bgc('../images/page7/sphere6.png',
            640);
            @include size(640,
            356);
            bottom: p2r(0);
        }
    }
    .page7 {
        background-color: #19072a;
        .bg{
            @include bg('../images/page8/streetlight.png');
            @include size(80,
            443);
            bottom: p2r(300);
            left:p2r(240);
            .lamp{
            @include bg('../images/page8/lamplight.png');
            @include size(437,
            427);
            top: p2r(10);
            left: p2r(-140);
            }
        }
        .bear{
            @include bg('../images/page8/bear6.png');
            @include size(276,271);
            bottom: p2r(280);
            left:p2r(230);
        }
        .moto{
            @include bg('../images/page8/moto.png');
            @include size(200,137);
            bottom: p2r(335);
            left:p2r(125);
        }
        .share{
            @include bgc('../images/page8/share.png',379);
            @include size(379,113);
            bottom: p2r(140);
        }
        .text{
            position:absolute;
            font-size: p2r(24);
            color:#b579d6;
            bottom: p2r(70);
            width: 100%;
            text-align: center;
        }
        .sphere{
            @include bgc('../images/page8/sphere7.png',640);
            @include size(640,384);
            bottom: p2r(0);
        }
    }
}